<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>带微信二维码切换的QQ在线客服代码特效 - 素材家园</title>
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="service_box">
  <ul class="tab_nav">
    <li><a href="http://www.weizhuan.la"><i class="icon icon_1"></i>在线客服</a></li>
    <li><a href="http://www.weizhuan.la"><i class="icon icon_3"></i></a></li>
  </ul>
  <div class="tab_content">
    <div class="tab_plan">
      <p class="fs14">财务充值:<br />
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=177805290&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:177805290:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p>
      <p class="fs14 mt10">客服微微:<br />
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=177805291&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:177805291:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p>
        <p class="fs14 mt10">客服赚赚:<br />
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=177805292&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:177805292:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p>
      <p class="fs14 mt10">客服啦啦:<br />
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=177805293&amp;site=qq&amp;menu=yes" class="qq_link"><img border="0" src="http://wpa.qq.com/pa?p=2:177805293:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a></p>
      <p class="mt10">服务时间:<br />
        9:00-20:00(工作日)<br />
      </p>
    </div>
    <div class="tab_plan" style="display: none;"><img src="images/weixin.jpg" alt="官方微信自助客服" width="130" height="130">
      <p>扫一扫关注微赚站长</p>
    </div>
  </div>
</div>
<script type="text/javascript">
$(".service_box .tab_nav li").hover(function(){
	var i=$(this).index();
	$(this).addClass("active").siblings().removeClass("active");
	$(".service_box .tab_plan:eq("+i+")").show().siblings().hide();
});
$(function(){
	var t;
	$(".service_box").hover(function(){
		$(".service_box").animate({right:0},300)
		clearTimeout(t);
	},function(){
		t=setTimeout(function(e){
			$(".service_box").animate({right:"-146px"},300);
			$(".service_box").find(".tab_nav li").removeClass("active");
		},1000);
	});
});
var isTransition=true;
$(".m_logo").hover(function(){
	var r=0;
	if(isTransition){
		animateTime = setInterval(function(){
			if (r>=153){
				clearInterval(animateTime);
				isTransition=true;
			}else{
				isTransition=false;
				r++;
				$(".m_logo a").attr("style","-webkit-mask:-webkit-gradient(radial, 45 25, "+r+", 45 25, "+(r+15)+", from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));")
			};
		},5);
	}
},function(){
	return;
});

</script> 
<!--[if lt IE 7]>
<script type="text/javascript">
	window.onscroll = function(){
		doc_scroll();
	};
	var doc_scroll = function(){
		var height = document.documentElement.clientHeight - 90 ;
		var scroll_top = $(document).scrollTop() ;
		$(".service_box").css({
			"top" : height + scroll_top - 74
		});
	};
	doc_scroll();
</script> 
<![endif]-->
</body>
</html>